<template>
	<view>
		<u-navbar :border-bottom="false" title-color="#FFFFFF" back-icon-color="#FFF"
			:is-fixed="isFixed" :is-back="isBack" 
			:background="background" 
			:back-text-style="{color: '#FFF'}" :title="title" 
			:back-icon-name="backIconName" :back-text="backText"
		>
			<view class="slot-wrap" v-if="useSlot">
				<view class="navbar-right">
					<view class="message-box right-item" @click="AddBtn">
						<u-icon name="plus" color="#ffffff" size="38"></u-icon>
					</view>
				</view>
			</view>
		</u-navbar>
		<view class="content">
			
			<view class="list_Wrap" v-for="(item,index) in listData" :key="index">
				<view class="List_title">
					<view>业务单号</view>
					<view>{{item.orderSN}}</view>
					<view v-if="item.ststus == 1">已完成</view>
					<view v-if="item.ststus == 0">作废</view>
				</view>
				
				<view class="list_center">
					<view class="left_box">
						<view class="left_item">
							货物名称：<span>{{item.cargoname}}</span>
						</view>
						<view class="left_item">
							船舶识别码：<span>{{item.identifycode}}</span>
						</view>
						<view class="left_item">
							货主：<span>{{item.ownerofcargo}}</span>
						</view>
						<view class="left_item">
							金额：<span>{{item.price}}</span>
						</view>
						<view class="left_item">
							申请企业：<span>{{item.enterprise}}</span>
						</view>
					</view>
					<view class="right_box">
						<view class="left_item">
							船名：<span>{{item.shipsname}}</span>
						</view>
						<view class="left_item">
							船舶长度：<span>{{item.shipslength}}</span>
						</view>
						<view class="left_item">
							装在吨数：<span>{{item.tunnage}}</span>
						</view>
						<view class="left_item">
							支付类型：<span>{{item.PayType}}</span>
						</view>
						<view class="left_item">
							联系电话：<span>{{item.phone}}</span>
						</view>
					</view>
				</view>
				
				<view class="list_btn">
					<view>查看详情</view>
				</view>
			</view>
			
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '驳船申报',
				backText: null,
				backIconName: 'nav-back',
				useSlot: true,
				background: {
					backgroundColor: '#2979ff',
				},
				isBack: true,
				custom: true,
				isFixed: true,
				
				listData:[
					{
						orderSN:'SF2904452377709',
						cargoname:'1',
						identifycode:'CN8876342',
						ownerofcargo:'陈帮主',
						price:'699.00',
						enterprise:'大连港务集团有限责任公司',
						shipsname:'乔治号',
						shipslength:'345米',
						tunnage:'500',
						PayType:'线下',
						phone:'18587632566',
						ststus:1
					},
					{
						orderSN:'SF2904452377709',
						cargoname:'1',
						identifycode:'CN8876342',
						ownerofcargo:'陈帮主',
						price:'699.00',
						enterprise:'大连港务集团有限责任公司',
						shipsname:'乔治号',
						shipslength:'345米',
						tunnage:'500',
						PayType:'线下',
						phone:'18587632566',
						ststus:0
					}
				]
			}
		},
		methods: {
			AddBtn(){
				uni.navigateTo({
					url: '../addBargeDeclare/addBargeDeclare'
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #F5F5F5;
	}
	.u-demo {
		//height: 200vh;
		height: calc(100% - 44px);
		height: calc(100% - 44px - constant(safe-area-inset-top));
		height: calc(100% - 44px - env(safe-area-inset-top));
	}
	
	.wrap {
		padding: 24rpx;
	}
	
	.navbar-right {
		margin-right: 24rpx;
		display: flex;
		margin-left: auto;
	}
	
	.search-wrap {
		margin: 0 20rpx;
		flex: 1;
	}
	
	.right-item {
		margin: 0 12rpx;
		position: relative;
		color: #ffffff;
		display: flex;
	}
	
	.message-box {
		
	}
	
	.slot-wrap {
		display: flex;
		align-items: center;
		flex: 1;
	}
	
	.map-wrap {
		display: flex;
		align-items: center;
		padding: 4px 6px;
		color: #fff;
		font-size: 30rpx;
		border-radius: 100rpx;
		margin-left: 30rpx;
	}
	
	.map-wrap-text {
		padding: 0 6rpx;
	}
	
	.list_Wrap{
	    background: #fff;
	    width: 95%;
	    margin: 10px auto;
	    padding: 18px 10px;
	    border-radius: 10px;
	    overflow: hidden;
	}
	.List_title {
		display: flex;
		align-items: center;
	    margin-bottom: 17px;
	}
	.List_title view:nth-child(1){
		background-color: #bfdeff;
	    color: #0070ff;
	    border-radius: 100px;
	    padding: 3px 8px;
		margin-right: 4px;
	}
	.List_title view:nth-child(2){
		color: #333;
		font-weight: 600;
	}
	.List_title view:nth-child(3){
		color: #007AFF;
		margin-left: auto;
	}
	.list_center {
	    overflow: hidden;	
	}
	.left_box {
	    width: 50%;
	    float: left;	
	}
	.left_item {
	    margin: 10px 0;
	    word-break: break-all;
	    display: -webkit-box;
	    -webkit-line-clamp: 1;
	    -webkit-box-orient: vertical;
	    overflow: hidden;
	    color: #9a9a9a;
	}
	.left_item span {
		color: #333;
	}
	.right_box {
		width: 50%;
	    float: left;
	    padding-left: 10px;	
	}
	.list_btn {
		width: 98%;
		background-color: #007AFF;
		color: #FFFFFF;
		height: 75rpx;
		line-height: 75rpx;
		text-align: center;
		border-radius: 100px;
		margin: 0 auto;
		margin-top: 10px;
	}
</style>
